<template>
  <div>
    <div class="top">
      <div class="header">
        <van-nav-bar title="收益明细" left-arrow @click-left="onClickLeft" />
      </div>
    </div>
    <div class="tab">
        <van-tabs>
            <van-tab title="直接收益">
                <div class="div">
                    <img src="../assets/images/1.png" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/huiyuan@3x.png" />
                            <span>超级会员</span>
                        </div>
                        <span class="add">+1222元</span>
                    </div>
                </div>
                <div class="div">
                    <img src="../assets/images/2.jpg" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/hehuoren@3x.png" />
                            <span>城市合伙人</span>
                        </div>
                        <span class="add">+1222元</span>
                    </div>
                </div>
                <div class="div">
                    <img src="../assets/images/1.png" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/fuwushang@3x.png" />
                            <span>城市服务商</span>
                        </div>
                        <span class="add">+1222元</span>
                    </div>
                </div>
                <div class="div">
                    <img src="../assets/images/2.jpg" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/hehuoren@3x.png" />
                            <span>城市合伙人</span>
                        </div>
                        <span class="add">+1222元</span>
                    </div>
                </div>
                <div class="div">
                    <img src="../assets/images/1.png" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/huiyuan@3x.png" />
                            <span>超级会员</span>
                        </div>
                        <span class="add">免费升级</span>
                    </div>
                </div>
            </van-tab>
            <van-tab title="间接收益">
                <div class="div">
                    <img src="../assets/images/2.jpg" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/huiyuan@3x.png" />
                            <span>超级会员</span>
                        </div>
                        <span class="add">+1222元</span>
                    </div>
                </div>
                <div class="div">
                    <img src="../assets/images/1.png" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/hehuoren@3x.png" />
                            <span>城市合伙人</span>
                        </div>
                        <span class="add">+1222元</span>
                    </div>
                </div>
                <div class="div">
                    <img src="../assets/images/2.jpg" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/fuwushang@3x.png" />
                            <span>城市服务商</span>
                        </div>
                        <span class="add">+1222元</span>
                    </div>
                </div>
                <div class="div">
                    <img src="../assets/images/2.jpg" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/hehuoren@3x.png" />
                            <span>城市合伙人</span>
                        </div>
                        <span class="add">+1222元</span>
                    </div>
                </div>
                <div class="div">
                    <img src="../assets/images/1.png" class="img" />
                    <div class="center">
                        <span class="name">柯信杰</span>
                        <span class="time">期限：2018.10.16-2019.10.15</span>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="../assets/images/huiyuan@3x.png" />
                            <span>超级会员</span>
                        </div>
                        <span class="add">免费升级</span>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
  </div>
</template>


<style scoped>
.header >>> .van-nav-bar .van-icon {
  color: #fff;
}
.header{
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
}
.van-nav-bar {
  background-color: #75c2f1;
  border: none;
}
.van-nav-bar__title {
  color: white !important;
}
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
.tab{
    margin-top:.45rem;
}
.tab >>> .van-tabs__line{
    background-color: white;
}
.tab >>> .van-tab--active{
    color: #00C6D8;
}
.tab >>> .van-tab{
    font-size:.16rem;
    font-family:PingFangSC;
    font-weight:400;
}
.div{
     width:100%;
     height:.6rem;
     background:white;
     /* margin-left:5%; */
     display: flex;
     margin-top: .09rem;
}
.img{
    width: 0.42rem;
    height: 0.42rem;
    margin-left: 5%;
    display: flex;
    justify-content: center;
    margin-top: 2.5%;
}
.center{
    width: 60%;
    padding-left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.name{
    font-size:.14rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(52,52,52,1);
}
.time{
    font-size:.12rem;
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(139,139,139,1);
    padding-top: 5%;
}
.right{
    width: 35%;
    display: flex;
    flex-direction: column;
    text-align: right;
    padding-right: 5%;
}
.right-top{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: .1rem;
    margin-bottom: 6%;
}
.right-top img{
    width: .13rem;
    height: .13rem;
    margin-right: 5%;
}
.right-top span{
    font-size:.12rem;
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(139,139,139,1);
    /* line-height:.24rem; */
}
.add{
    font-size:.12rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(0,198,216,1);
    line-height:.2rem;
}


</style>

<script>
export default ({
    onClickLeft() {
      // 点击回退的时候当做地址回退
      this.$router.back();
    },
});
</script>




